<template>
  <div class='no-bg'>
    <!--顶部三个图标-->
    <div class='flex gap-4' style='height: 30%'>
      <div class='w-1/3 h-full'>
        <Report1 />
      </div>
      <div class='w-1/3 h-full'>
        <Report2 />
      </div>
      <div class='w-1/3 h-full'>
        <Report3 />
      </div>
    </div>
    <!--下方区域-->
    <div class='flex gap-4 flex-1'>
      <div class='w-2/4 bg-white' style='padding: 15px'>
        <!--销售额排行榜-->
        <SalesRevenueTable />
      </div>
      <div class='flex-1 flex flex-col gap-4'>
        <div class='h-2/4 bg-white'>
          <!--销售额走势图-->
          <SalesBar />
        </div>
        <div class='h-2/4 flex gap-4'>
          <div class='bg-white w-2/4'>
            <!--区域销售分布图-->
            <RegionPie />
          </div>
          <div class='bg-white w-2/4'>
            <!--销售额前五-->
            <Top5SalesPie/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import Report1 from '@/view/home/component/Report1.vue'
import Report2 from '@/view/home/component/Report2.vue'
import Report3 from '@/view/home/component/Report3.vue'
import SalesRevenueTable from '@/view/home/component/SalesRevenueTable.vue'
import SalesBar from '@/view/home/component/SalesBar.vue'
import RegionPie from '@/view/home/component/RegionPie.vue'
import Top5SalesPie from '@/view/home/component/Top5SalesPie.vue'

</script>

<style scoped>
.no-bg {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
</style>
